<template>
    <div>

        <a-tabs hide-add type="editable-card" v-model:activeKey="baseStore.route" @edit="onEdit"
            @change="baseStore.updateRoute" style="background-color: white;padding: 20px 0 0 20px;">
            <a-tab-pane key="home" tab="工作站" :closable="false"></a-tab-pane>
            <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
            </a-tab-pane>
            <template #rightExtra>
                <a-button type="link" @click="closeOther">关闭其他</a-button>
                <a-button type="link" @click="baseStore.incr">刷新</a-button>
            </template>
            <!-- <template #tab>-</template> -->


        </a-tabs>

        <a-layout-content style="padding: 0 10px 0 10px;">
            <a-watermark :content="content">
                <router-view :key="baseStore.counter" />
            </a-watermark>
        </a-layout-content>

    </div>
</template>


<script setup lang="ts">
import { ref, watch } from 'vue';
import useBaseStore from '@/stores/baseStore.ts'

const baseStore = useBaseStore();
const content = "GTenACGN          By: dusqs            Gitee: https://gitee.com/dusqs "

watch(
    () => baseStore.route,
    () => {
        if (baseStore.getRoute !== 'home' && !panes.value.filter(pane => pane.key == baseStore.getRoute).length) {
            const e = baseStore.getTargetRoute(baseStore.getRoute)
            const pane: pane = {
                key: baseStore.getRoute,
                title: e?.title || ('未定义: ' + baseStore.getRoute),
            }
            panes.value.push(pane)
        }
    }
)

type pane = {
    title: string;
    key: string;
    content?: string;
    closable?: boolean;
}

const panes = ref<pane[]>([]);

function remove(targetKey: string) {
    let lastIndex = 0;
    panes.value.forEach((pane, i) => {
        if (pane.key === targetKey) {
            lastIndex = i - 1;
        }
    });
    panes.value = panes.value.filter(pane => pane.key !== targetKey);
    if (baseStore.getRoute === targetKey) {
        if (lastIndex >= 0) {
            baseStore.updateRoute(panes.value[lastIndex].key)
        } else {
            baseStore.updateRoute('home')
        }
    }
};

function onEdit(targetKey: string) {
    remove(targetKey);
}

function closeOther() {
    panes.value = panes.value.filter(pane => pane.key === baseStore.getRoute)
}


</script>